<template>
  <div class="drawer_box">
    <div
      class="flex_bw_center"
      style="transform: translate(-1px, 1px); margin-top: 10px;"
    >
      <!-- <div style="    display: flex;">
            <el-select
            v-model="selectValue"
            placeholder="监区"
            style="width: 200px;"
          >
            <el-option
              v-for="item in optionsS"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button
            title="查询"
            class="filter-item"
            style="margin-left: 10px"
            type="primary"
            :icon="Search"
            @click="getCriminalInfoSelect"
          >
          </el-button>
        </div> -->
    </div>
    <div class="isTable flex_start_start">
      <div style="width: 150px; margin-right: 10px" class="btn_box">
        <div
          @click="btnClick(item, index)"
          :class="{ isAtv: isIndex == index }"
          class="itemz flex_center_center"
          v-for="(item, index) in jqArrCv"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <div style="width: 90%">
        <div style="margin-bottom: 10px">
          <el-date-picker
            v-model="datePicker"
            type="date"
            placeholder="选择日期"
            size="default"
            value-format="YYYY-MM-DD"
            @change="chanse"
          />
        </div>

        <el-table
          :data="CriminalInfoSelectList"
          border
          fit
          highlight-current-row
         
          stripe
          style="width: 100%"
        >
          <el-table-column type="index" align="center" width="60" label="序号">
          </el-table-column>
          <el-table-column label="姓名" align="center" width="120">
            <template #default="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属监区" align="center" width="110">
            <template #default="scope">
              <span>{{ scope.row.orgName }}</span>
            </template>
          </el-table-column>

          <el-table-column label="夜巡监区" align="center">
            <template #default="scope">
              <span>{{ scope.row.takeOrgName }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";
const activeName = ref("普管级");
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Object,
    default: {},
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
let CriminalInfoSelectList = ref([]);
let searchName = ref("");
const selectValue = ref("");

let dateSfm = ref("");
let hour = ref("");
let daydata = ref("");
let datePicker = ref("");
// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};

const getCriminalInfoSelect = async () => {
  let res = await http.zfpt.NightSearchSelect({
    page: 1,
    limit: 99,
    name: "",
    orgId: selectValue.value,
    takeOrgId: "",
    sendDate: datePicker.value,
    returnDate: "",
    state: "",
  });
  if (res && res.code == 0) {
    CriminalInfoSelectList.value = res.data.data;
  }
};
let jqArrCv = ref([]);
let isIndex = ref(0);
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndex.value = index;
  getCriminalInfoSelect();
};

const chanse = (row) => {
  
  if (row) {
    getCriminalInfoSelect();
  } else {
    datePicker.value = daydata.value;
    getCriminalInfoSelect();
  }
};

watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      getFormattedDateTime();
      datePicker.value = daydata.value;
      if (props.jqArr) {
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));

        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq.join(",");
        let allObj = {
          name: JSON.parse(sessionStorage.getItem("userInfo")).unitName,
          id: allJq.join(","),
        };
        jqArrCv.value.unshift(allObj);
      }

      getCriminalInfoSelect();
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">
.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}
::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
.drawer_box {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  .drawer_text {
    position: absolute;
    top: -23px;
    left: 2px;
    font-size: 18px;
  }
}
</style>
